<!--购物车中的input组件-->
<template>
    <div class="bex">
        <input type="button" value="-" @click="delCount">
        <input type="button" class="txt" v-model="number">
        <input type="button" value="+" @click="addCount">
    </div>
</template>

<script>
    export default{
        props:["Counts","shopId"],//用来接收父组件传过来的值(商品的数量)和商品的id
        data(){
            return {
                number: "",//用来记录从父组件中传回的值
                id: "",//用来接收父组件传过来的商品id
                resObj:{shopId:0,type:""}//这里定义了一个对象，目的是为了在子组件中进行加减操作的同时将商品的id和加减状态传回到父组件中，
                //从而使父组件可以将对应id的商品根据子组件传回的状态进行相应的增加或减少，之后再将修改的数据从新保存到本地localStorage中。
            }
        },
        created(){
            this.number = this.Counts;//这里将父组件中传回来的值赋值给子组件中的number中。
            this.id = this.shopId;//这里将父组件传过来的商品id进行保存
        },
        methods:{
            addCount(){
                this.number ++;
                this.sendMsg("add");//在点击的时候触发传参方法。
            },
            delCount(){
                this.number--;
                if(this.number < 1){
                    this.number = 1;
                    return;
                };
                this.sendMsg("subStr");//在点击的时候触发向父组件传参的方法。
            },
            sendMsg(type){
                this.resObj.type = type;
                this.resObj.shopId = this.id;
                this.$emit("sendCount",this.resObj);//通过this.$emit向父组件传参。在父组件中通过v-on:sendCount="父组件获取数据的方法名"来接受参数。
                //同时这里向父组件传参的时候，不仅传回商品的id，还传回了一个状态(加还是减),方便父组件进行相关的逻辑操作。
            }
        }
    }
</script>

<style scoped>
    .bex {
        display: inline-block;
    }
    .bex input {
        height: 30px;
        font-weight: 700;
    }
    .txt {
        width: 20px;
        margin: 0;
        width: 50px;
    }
</style>
